
    <div class="content margin_top_foot">
        <header class="header fixed_top bg_mx_green"></header>
        <div class="swipe">
            <div class='swipe-wrap'></div>
            <ul class="position"></ul>
            <div class="swipe_nav flex">
                <div class="flex_1 label_white active" data-text="info">详细介绍</div>
                <div class="flex_1 label_white" data-text="service">食宿服务</div>
                <div class="flex_1 label_white" data-text="comment">游客评价</div>
                <div class="flex_1 label_white" data-text="guide">地区攻略</div>
            </div>
        </div>
        <div class="housedetail"></div>
        <div class="sidebar fixed lineheight_4 white hide"></div>
        <footer class="fixed_bottom bg_mx_green font_16 text_center lineheight_50" onclick="book()">预定</footer>
    </div>
    <script type="text/template" charset="utf-8" id='swipe_template'></script>
    <script type="text/template" charset="utf-8" id='housedetail_template'>
        <div class="margin_b_10 padding_10_15 bg_white">
            <div class="font_16 v_center margin_b_10">{{=it.name}}</div>
            <div class="h_justify light">
                <span class="warning">￥{{=it.price}}元<span class="font_12">/人/天</span></span>
                <span class="">预定次数：{{=it.booked}}</span>
                <span class="">剩余房间：{{=it.leftroom}}</span>
            </div>
        </div>
        {{if(it.show == 'info'){}}
        <div class="margin_b_10 padding_10_15 bg_white text_indent">{{=it.info}}</div>
        {{}}}
        {{if(it.show == 'service'){}}
        <div class="margin_b_10 padding_10_15 bg_white text_indent">{{=it.service}}</div>
        {{}}}
        {{if(it.show == 'guide'){}}
        <div class="margin_b_10 bg_white">
            {{for(var i=0;i<it.guide.length;i++){}}
            <div class="padding_15 border_b font_12 flex" onclick="location.href='{{=it.guide[i].url}}'">
                <div class="width_100">
                    <img src="{{=it.guide[i].img}}" alt="">
                </div>
                <div class="left_100 padding_l_15">{{=it.guide[i].content}}</div>
            </div>
            {{}}}
        </div>
        {{}}}
        {{if(it.show == 'comment'){}}
        <div class="bg_white">
            <div class="mx_green lineheight_3 border_b padding_h_15"><i class="iconfont icon-xiaoxixuanzhong01 font_20"></i> 顾客评论</div>
            <div class="padding_h_15 border_b">
                {{for(var i=0;i<it.comment.length;i++){}}
                <div class="comment light border_b padding_v_10">
                    <div class="flex_justify margin_b_10">
                        <div class="flex">
                            <div class="width_20">
                                <img class="circle" src="{{=it.comment[i].headimg}}" alt="">
                            </div>
                            <div class="padding_l_10 width_50 text_ellipsis">{{=it.comment[i].name}}</div>
                        </div>
                        <div class="font_16 width_100 grey">
                            {{for(var j=0;j<it.comment[i].star;j++){}}
                                <i class="iconfont icon-star1 warning"></i>
                            {{}}}
                        </div>
                        <div class="font_12 text_ellipsis">{{=it.comment[i].time}}</div>
                    </div>
                    {{if(it.comment[i].picture){}}
                    <div class="flex_row_3 margin_b_10">
                        {{for(var j=0;j<it.comment[i].picture.length;j++){}}
                            <div class="row_one"><img src="{{=it.comment[i].picture[j]}}" alt=""></div>
                        {{}}}
                    </div>
                    {{}}}
                    <div class="">{{=it.comment[i].content}}</div>
                </div>
                {{}}}
            </div>
        </div>
        {{}}}
    </script>
    <script>
        // 轮播模版
//            var banner = ["/static/images/farmhouse.jpg","/static/images/img1.jpg","/static/images/farmhouse.jpg","/static/images/img1.jpg"]
            var banner = <{$banner}>;
            loadswipe(banner)
        // 农家乐详情模版
//            var housedetail = {name:"赵四家农家食宿",price:80,booked:8,leftroom:3,show:"info",info:'<p>详细介绍位于柞水溶洞山下，周边环境优美，开门见山，空气清新。我们家有五间房子，房间设施整洁干净，有完整的卫浴设施。欢迎大家来我家游玩。详细介绍文字，后台可自定义编辑图文混排。</p><img src="/static/images/farmdetail.jpg" alt="">',service:'<p>食宿服务位于柞水溶洞山下，周边环境优美，开门见山，空气清新。我们家有五间房子，房间设施整洁干净，有完整的卫浴设施。欢迎大家来我家游玩。详细介绍文字，后台可自定义编辑图文混排。</p><img src="/static/images/farmdetail.jpg" alt="">',guide:[{img:"/static/images/farmhouse.jpg",content:"玩的很开心，我们公司去游玩，做的菜也很好吃，尤其生态小炒肉，太好吃了，环境特别棒，牛背梁的风景美爆了"},{img:"/static/images/farmhouse.jpg",content:"玩的很开心，我们公司去游玩，做的菜也很好吃，尤其生态小炒肉，太好吃了，环境特别棒，牛背梁的风景美爆了"},{img:"/static/images/farmhouse.jpg",content:"玩的很开心，我们公司去游玩，做的菜也很好吃，尤其生态小炒肉，太好吃了，环境特别棒，牛背梁的风景美爆了"}],comment:[{name:"仔仔",headimg:"http://wx.qlogo.cn/mmopen/47CicbLQOxtWoYIWeEQXzAXeicsEUO3wxEF0IRjQgQNm41K2skIegWuMMhh4icDrcWqleqDcyf7w98gGKe8DS8At8ZQSQ4W8J01/0",star:"5",picture:["/static/images/list1.jpg","/static/images/list2.jpg","/static/images/list1.jpg"],time:"2017-06-12 12:00",content:"不错，值得一去不错，值得一去不错，值得一去不错，值得一去"},{name:"elena",headimg:"http://wx.qlogo.cn/mmopen/47CicbLQOxtWoYIWeEQXzAXeicsEUO3wxEF0IRjQgQNm41K2skIegWuMMhh4icDrcWqleqDcyf7w98gGKe8DS8At8ZQSQ4W8J01/0",star:"3",time:"2017-06-12 12:00",content:"不错，值得一去不错，值得一去不错，值得一去不错，值得一去"}]}
            var housedetail = <{$detail}>;
            var evaldetail = doT.template($("#housedetail_template").text());
            loaddata(".housedetail",evaldetail,housedetail);
        // 切换内容

            $(".swipe_nav .flex_1").click(function(){
                housedetail.show = $(this).data("text");
                loaddata(".housedetail",evaldetail,housedetail);
                $(this).addClass("active").siblings().removeClass("active");
            })
        // 页面初始化：头部,底部菜单
            loadheadbar("农家乐详情");
            loadfootbar();
        // 预定
            function book(){
                location.href = "/farmerhouse/order/confirm?id=<{$app->request->get('id')}>";
            }
    </script>


